<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>头部导航栏布局</title>
	<!-- 		<link rel="shortcut icon" type="text/css" href="./images/favico.ico"/> -->
	<link rel="stylesheet" href="./css/reset.css">
	<link rel="stylesheet" href="./css/all.css">
	<link rel="stylesheet" type="text/css" href="./css/login.css" />

</head>

<body>
	<!-- 项目的最外层 -->
	<div class="outer">

		<!-- 头部 -->
		<header class="header">
			<!-- 头部的第一行 -->
			<div class="top">
				<div class="container">
					<div class="loginList">
						<p>美淘惠欢迎您！</p>
						<p>
							<span>请</span>
							<a href="###">登录</a>
							<a href="###" class="register">免费注册</a>
						</p>
					</div>
					<div class="typeList">
						<a href="###">我的订单</a>
						<a href="###">我的购物车</a>
						<a href="###">我的美淘惠</a>
						<a href="###">美淘惠会员</a>
						<a href="###">企业采购</a>
						<a href="###">关注美淘惠</a>
						<a href="###">合作招商</a>
						<a href="###">商家后台</a>
					</div>
				</div>
			</div>
			<!--头部第二行 搜索区域-->
			<div class="bottom">
				<h1 class="logoArea">
					<a class="logo" title="美淘惠" href="###" target="_blank">
						<img src="./images/Logo.png" alt="">
					</a>
				</h1>
				<div class="searchArea">
					<form action="###" class="searchForm">
						<input type="text" id="autocomplete" class="input-error input-xxlarge" />
						<button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
					</form>
				</div>
			</div>
		</header>

		<!-- 登录 -->
		<div class="login-wrap">
			<div class="login">
				<div class="loginform">
					<ul class="tab clearFix">
						<li>
							<a href="##" style="border-right: 0;">扫描登录</a>
						</li>
						<li>
							<a href="##" class="current">账户登录</a>
						</li>
					</ul>

					<div class="content">
						<form action="##">

							<div class="input-text clearFix">
								<i></i>
								<input type="text" placeholder="手机号">
								<span class="error-msg">错误提示信息</span>
							</div>

							<div class="input-text clearFix">
								<i class="pwd"></i>
								<input type="text" placeholder="请输入密码">
								<span class="error-msg">错误提示信息</span>
							</div>

							<div class="setting clearFix">
								<label class="checkbox inline">
									<input name="m1" type="checkbox" value="2" checked="">
									自动登录
								</label>
								<span class="forget">忘记密码？</span>
							</div>
							<button class="btn">登&nbsp;&nbsp;录</button>

						</form>
						<div class="call clearFix">
							<ul>
								<li><img src="images/qq.png" alt=""></li>
								<li><img src="images/sina.png" alt=""></li>
								<li><img src="images/ali.png" alt=""></li>
								<li><img src="images/weixin.png" alt=""></li>
							</ul>
							<a href="##" class="register">立即注册</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<div class="copyright">
			<ul>
				<li>关于我们</li>
				<li>联系我们</li>
				<li>联系客服</li>
				<li>商家入驻</li>
				<li>营销中心</li>
				<li>手机美淘惠</li>
				<li>销售联盟</li>
				<li>美淘惠社区</li>
			</ul>
			<div class="address">地址：北京市昌平区宏福科技园综合楼6层</div>
			<div class="beian">京ICP备19006430号
			</div>
		</div>

	</div>

</body>

</html>